el-table-column
<template>
  <div>
    <h1>菜单管理</h1>
    <!-- 查询条件 -->
    <el-form :inline="true" :model="searchFrom" class="demo-form-inline">
      <el-form-item label="菜单名称">
        <el-input
          v-model="searchFrom.keyWord"
          placeholder="请输入菜单名称"
          clearable
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="loadMenuTreeList">搜索</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
      stripe
    >
      <el-table-column prop="menuId" label="序号" sortable />
      <el-table-column prop="menuName" label="菜单名称" sortable />
      <el-table-column prop="path" label="组件路径" sortable />
      <el-table-column prop="status" label="状态" sortable>
        <template #default="scope">
          <el-tag v-if="scope.row.status == 0">正常</el-tag>
          <el-tag type="danger" v-if="scope.row.status == 1">不正常</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" sortable />
      <el-table-column label="操作">
        <el-button type="primary" :icon="Edit" circle />

        <el-button type="danger" :icon="Delete" circle />
        <el-button type="success" circle>+</el-button>
      </el-table-column>
    </el-table>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { getTreeMenuList } from "../api/api";
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from "@element-plus/icons-vue";
const tableData = ref([]);
const searchFrom = ref({
  keyWord: null,
});

//加载菜单列表
const loadMenuTreeList = () => {
  getTreeMenuList(searchFrom.value).then((res) => {
    tableData.value = res.data.data;
  });
};

//初始化数据
onMounted(() => {
  loadMenuTreeList();
});
</script>
